<template>
    <view class="content" :style="{paddingTop: statusBar + 45 + 'px'}">
        <view class="u-flex">
			<view class="title">经营数据看板</view>
			<view class="nav2-r">
			    <view>日期检索</view>
			    <view class="time" @click="show = true">
			        <view>{{time || '请选择'}}</view>
			        <image src="../static/icon/time.png" class="time-icon"></image>
			    </view>
			</view>
		</view>
        
        <view class="header">
            <scroll-view scroll-x>
                <view class="nav">
                    <view class="nav-i" :class="{navActive : item.id == line_id}" 
                        v-for="(item, index) in list" :key="index" @click="chooseNav(item)">
                        {{item.name}}
                    </view>
                </view>
            </scroll-view>
        </view>
        
        <view class="wrapper" v-if="line_id != 0">
            <view class="box">
                <view class="top">
                    <image src="../static/icon/l_1.png" class="icon"></image>
                    <view>发车</view>
                </view>
                <view class="down">
                    <view class="item">
                        <view>日发车</view>
                        <view class="num">{{data.day_start}}</view>
                    </view>
                    <view class="item">
                        <view>月发车</view>
                        <view class="num">{{data.month_start}}</view>
                    </view>
                    <view class="item">
                        <view>年发车</view>
                        <view class="num">{{data.year_start}}</view>
                    </view>
                </view>
            </view>
            
            <view class="box">
                <view class="top">
                    <image src="../static/icon/l_2.png" class="icon"></image>
                    <view>收入</view>
                </view>
                <view class="down">
                    <view class="item">
                        <view>日收入</view>
                        <view class="num">{{data.day_amount}}</view>
                    </view>
                    <view class="item">
                        <view>月收入</view>
                        <view class="num">{{data.month_amount}}</view>
                    </view>
                    <view class="item">
                        <view>年收入</view>
                        <view class="num">{{data.year_amount}}</view>
                    </view>
                </view>
            </view>
            
            <view class="box">
                <view class="top">
                    <image src="../static/icon/l_3.png" class="icon"></image>
                    <view>支出</view>
                </view>
                <view class="down">
                    <view class="item">
                        <view>日支出</view>
                        <view class="num">{{data.day_pay}}</view>
                    </view>
                    <view class="item">
                        <view>月支出</view>
                        <view class="num">{{data.month_pay}}</view>
                    </view>
                    <view class="item">
                        <view>年支出</view>
                        <view class="num">{{data.year_pay}}</view>
                    </view>
                </view>
            </view>
            
            <view class="box">
                <view class="top">
                    <image src="../static/icon/l_4.png" class="icon"></image>
                    <view>利润</view>
                </view>
                <view class="down">
                    <view class="item">
                        <view>日利润</view>
                        <view class="num">{{data.day_profit}}</view>
                    </view>
                    <view class="item">
                        <view>月利润</view>
                        <view class="num">{{data.month_profit}}</view>
                    </view>
                    <view class="item">
                        <view>年利润</view>
                        <view class="num">{{data.year_profit}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 汇总 -->
        <view v-if="line_id == 0">
            <view class="hz-box">
                <view class="hz-item">
                    <image src="../static/icon/l_5.png" class="icon"></image>
                    <view class="sub">总收入(万)</view>
                    <view class="num">{{data.all_amount}}</view>
                </view>
                <view class="hz-item">
                    <image src="../static/icon/l_6.png" class="icon"></image>
                    <view class="sub">总支出(万)</view>
                    <view class="num">{{data.all_pay}}</view>
                </view>
                <view class="hz-item">
                    <image src="../static/icon/l_7.png" class="icon"></image>
                    <view class="sub">总利润(万)</view>
                    <view class="num">{{data.all_profit}}</view>
                </view>
            </view>
            
            <view class="scroll">
                <scroll-view scroll-x>
                    <view class="u-flex">
                        <view class="s-t-r">
                            <view class="line">线路</view>
                            <view class="s-t-item">
                                <view class="s-t-item-t">收入(万)</view>
                                <view class="s-t-item-d">
                                    <view>日</view>
                                    <view>月</view>
                                    <view>年</view>
                                </view>
                            </view>
                            <view class="s-t-item">
                                <view class="s-t-item-t s-t-item-t2">支出(万)</view>
                                <view class="s-t-item-d s-t-item-d2">
                                    <view>日</view>
                                    <view>月</view>
                                    <view>年</view>
                                </view>
                            </view>
                            <view class="s-t-item">
                                <view class="s-t-item-t s-t-item-t3">利润(万)</view>
                                <view class="s-t-item-d s-t-item-d3">
                                    <view>日</view>
                                    <view>月</view>
                                    <view>年</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="u-flex" v-for="(item, index) in data.line_summary" :key="index">
                        <view class="s-down">
                            <view class="s-down-l">{{item.name}}</view>
                            <view class="s-down-r" :class="{'s-down-total' : index == data.line_summary.length - 1}">
                                <view class="value">{{item.day_amount}}</view>
                                <view class="value">{{item.month_amount}}</view>
                                <view class="value">{{item.year_amount}}</view>
                                
                                <view class="value">{{item.day_pay}}</view>
                                <view class="value">{{item.month_pay}}</view>
                                <view class="value">{{item.year_pay}}</view>
                                
                                <view class="value">{{item.day_profit}}</view>
                                <view class="value">{{item.month_profit}}</view>
                                <view class="value">{{item.year_profit}}</view>
                            </view>
                        </view>
                    </view>
                    
                    <!-- <view class="u-flex">
                        <view class="s-down">
                            <view class="s-down-l">合计</view>
                            <view class="s-down-total">
                                <view>10</view>
                                <view>200</view>
                                <view>1000</view>
                                
                                <view>1</view>
                                <view>10</view>
                                <view>100</view>
                                
                                <view>9</view>
                                <view>190</view>
                                <view>900</view>
                            </view>
                        </view>
                    </view> -->
                </scroll-view>
            </view>
        </view>
    
		<!-- 日期 -->
		<u-picker v-model="show" mode="time" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
				show: false,
				time: '',
				data: {},
				list: [],
				line_id: '',
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
			this.getLine()
        },
        methods: {
            chooseNav(item) {
				console.log(this.line_id,item)
				if (this.line_id == item.id) return
                this.line_id = item.id
				this.getData()
            },
			
			confirm(e) {
				console.log(e)
				this.time = e.year + '-' + e.month + '-' + e.day
				this.getData()
			},
			
			getData() {
			    this.$ajax('leader_summary', {
			        user_token: this.$getSync('userToken'),
					line_id: this.line_id,//线路ID
					date: this.time,//日期搜索
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.data = ret.detail
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
			// 获取线路
			getLine() {
			    this.$ajax('select_line', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.list = ret.detail.line
						this.list.push({
							name: '汇总',
							id: 0,
						})
						this.line_id = this.list && this.list[0] && this.list[0].id
						this.getData()
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    
    
    
    page{
        background: linear-gradient(to bottom, #f3f7ff,#f6f8fa,#f2f3f8,#f5f6fa);
    }
    .content{
        padding-bottom: 50rpx;
    }
    .title{
        font-size: 46rpx;
        font-weight: bold;
        padding-left: 30rpx;
		flex: 1;
    }
    
	.nav2-r{
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	    font-size: 24rpx;
	    color: #737373;
	    padding-right: 30rpx;
	}
	.time{
	    min-width: 210rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    color: #000;
	    margin-left: 12rpx;
	    padding: 15rpx;
	    background-color: #fff;
	    border-radius: 10rpx;
	}
	.time-icon{
	    width: 25rpx;
	    height: 25rpx;
	    margin-left: 20rpx;
	}
    .header{
        width: 750rpx;
        white-space: nowrap;
        margin-bottom: 20rpx;
        background: linear-gradient(to top, #fff, #fff,#f4f7ff);
    }
    .nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-i {
        padding: 60rpx 30rpx 30rpx;
        font-size: 30rpx;
        text-align: center;
    }
    .navActive {
        font-size: 30rpx;
        color: #0075cf;
        font-weight: bold;
        position: relative;
    }
    .navActive::after{
        display: block;
        content: '';
        width: 32rpx;
        height: 8rpx;
        background-color: #0075cf;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    
    .wrapper{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx 20rpx 40rpx;
        margin-bottom: 16rpx;
    }
    .top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 40rpx;
        font-size: 28rpx;
        font-weight: bold;
    }
    .icon{
        width: 39rpx;
        height: 39rpx;
        margin-right: 15rpx;
    }
    .down{
        padding: 0 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item{
        width: calc(650rpx / 3);
        padding-right: 10rpx;
        font-size: 24rpx;
        color: #656565;
    }
    .num{
        font-size: 43rpx;
        font-weight: bold;
        color: #000;
        word-break: break-all;
        white-space: pre-line;
        padding-top: 10rpx;
    }
    
    .hz-box{
        margin: 35rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hz-item{
        width: calc(680rpx / 3);
        padding: 30rpx 0 30rpx 20rpx;
        background-color: #fff;
        border-radius: 30rpx;
    }
    .sub{
        font-size: 24rpx;
        color: #656565;
        padding-top: 35rpx;
    }
    
    
    .scroll{
        width: 750rpx;
        white-space: nowrap;
        border: 1rpx solid #e7e7e7;
        font-size: 24rpx;
        color: #656565;
        margin-left: 20rpx;
        padding-right: 20rpx;
        background-color: #fff;
    }
    
    .s-t-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .line{
        width: 150rpx;
        height: 105rpx;
        text-align: center;
        line-height: 105rpx;
    }
    .s-t-item-t{
        width: 334rpx;
        height: 52rpx;
        background-color: #7fabff;
        text-align: center;
        line-height: 52rpx;
        color: #fff;
    }
    .s-t-item-d{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .s-t-item-d>view{
        width: calc(334rpx / 3);
        height: 53rpx;
        background-color: #f1f5fe;
        text-align: center;
        line-height: 53rpx;
        color: #000;
        border-left: 1rpx solid #e7e7e7;
    }
    .s-t-item-t2{
        background-color: #ffa163;
    }
    .s-t-item-d2>view{
        background-color: #feece1;
    }
    .s-t-item-t3{
        background-color: #ffc859;
    }
    .s-t-item-d3>view{
        background-color: #fff5e2;
    }
    
    .s-down{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .s-down-l{
        width: 150rpx;
        height: 77rpx;
        border-top: 1rpx solid #e7e7e7;
        word-break: break-all;
        white-space: pre-line;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .s-down-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .value{
        width: calc(334rpx / 3);
        height: 77rpx;
        text-align: center;
        line-height: 77rpx;
        border-left: 1rpx solid #e7e7e7;
        border-top: 1rpx solid #e7e7e7;
    }
    .s-down-total{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .s-down-total>view{
        width: calc(334rpx / 3);
        height: 77rpx;
        text-align: center;
        line-height: 77rpx;
        border-left: 1rpx solid #e7e7e7;
        border-top: 1rpx solid #e7e7e7;
        color: #0075cf;
    }
    
    

</style>
